<template>
  <view class="page-content" style="padding-bottom: 100rpx;">
    <!-- 搜索和筛选 -->
    <view class="filter-section">
      <view class="search-box">
        <input 
          class="search-input" 
          placeholder="搜索项目名称或产品型号" 
          v-model="searchKeyword"
          @input="onSearch"
        />
      </view>
      <view class="filter-tabs">
        <view 
          class="filter-tab" 
          :class="{ active: currentFilter === filter.value }"
          v-for="filter in filterTabs" 
          :key="filter.value"
          @click="onFilterChange(filter.value)"
        >
          {{ filter.label }}
        </view>
      </view>
    </view>

    <!-- 生产项目列表 -->
    <scroll-view 
      scroll-y 
      class="production-list"
      v-if="filteredProductionList.length"
      refresher-enabled="true"
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
    >
      <view class="production-item" v-for="item in filteredProductionList" :key="item.id" @click="goToDetail(item)">
        <view class="item-header">
          <view class="project-info">
            <text class="project-name">{{ item.project_name }}</text>
            <text class="product-model">{{ item.model }}</text>
          </view>
          <view class="status-badge" :class="item.status">{{ item.status_text }}</view>
        </view>
        
        <view class="item-content">
          <view class="quantity-section">
            <view class="quantity-row">
              <text class="quantity-label">生产数量：</text>
              <text class="quantity-value">{{ item.quantity }}{{ item.unit }}</text>
            </view>
            <view class="quantity-row">
              <text class="quantity-label">已完成：</text>
              <text class="quantity-value highlight">{{ item.completed_quantity }}{{ item.unit }}</text>
            </view>
          </view>
          
          <view class="progress-section">
            <view class="progress-info">
              <text class="progress-text">生产进度：{{ item.completed_quantity }}/{{ item.quantity }}</text>
              <text class="progress-percentage">{{ item.progress_percentage }}%</text>
            </view>
            <view class="progress-bar">
              <view class="progress-fill" :style="{ width: item.progress_percentage + '%' }"></view>
            </view>
          </view>
          
          <view class="time-info">
            <text class="start-date">开始时间：{{ item.start_date }}</text>
            <text class="end-date" v-if="item.end_date">完成时间：{{ item.end_date }}</text>
          </view>
        </view>
        
        <view class="item-actions" @click.stop>
          <button class="action-btn view" @click="viewDetail(item)">查看详情</button>
          <button class="action-btn edit" @click="editProduction(item)" v-if="item.status === 'processing'">编辑</button>
          <button class="action-btn complete" @click="completeProduction(item)" v-if="item.status === 'processing'">完成</button>
        </view>
      </view>
    </scroll-view>

    <!-- 空状态 -->
    <view class="empty" v-else>
      <image src="/static/empty.png" class="empty-img" />
      <text class="empty-text">暂无生产项目</text>
    </view>

    <!-- 添加按钮 -->
    <view class="add-btn" @click="addNewProduction">
      <text class="add-icon">+</text>
    </view>

    <custom-tabbar :current="tabIndex" :tabList="tabList" />
  </view>
</template>

<script>
import CustomTabbar from '@/components/custom-tabbar/CustomTabbar.vue'
import { getTabListByRole } from '@/utils/tabberList.js'

export default {
  components: { CustomTabbar },
  data() {
    return {
      tabList: [],
      tabIndex: 0,
      searchKeyword: '',
      currentFilter: 'all',
      refreshing: false,
      filterTabs: [
        { label: '全部', value: 'all' },
        { label: '生产中', value: 'processing' },
        { label: '已完成', value: 'completed' },
        { label: '已暂停', value: 'paused' }
      ],
      productionList: [
        {
          id: 1,
          project_name: '华为总部项目',
          model: 'HW-2025',
          quantity: 100,
          completed_quantity: 60,
          unit: '台',
          progress_percentage: 60,
          start_date: '2024-01-15',
          end_date: '',
          status: 'processing',
          status_text: '生产中'
        },
        {
          id: 2,
          project_name: '地铁三号线项目',
          model: 'DT-2025',
          quantity: 50,
          completed_quantity: 50,
          unit: '套',
          progress_percentage: 100,
          start_date: '2024-01-10',
          end_date: '2024-01-19',
          status: 'completed',
          status_text: '已完成'
        },
        {
          id: 3,
          project_name: '腾讯大厦项目',
          model: 'TX-2025',
          quantity: 80,
          completed_quantity: 0,
          unit: '件',
          progress_percentage: 0,
          start_date: '2024-01-20',
          end_date: '',
          status: 'paused',
          status_text: '已暂停'
        }
      ]
    }
  },
  onShow() {
    const role = uni.getStorageSync('user-role');
    this.tabList = getTabListByRole(role);
    let currentPath = '';
    const pages = getCurrentPages();
    if (pages.length) {
      currentPath = pages[pages.length - 1].route || pages[pages.length - 1].__route__ || '';
    }
    this.tabIndex = this.tabList.findIndex(item => item.pagePath === currentPath);
    
    // 获取生产项目列表
    this.getProductionList();
  },
  computed: {
    filteredProductionList() {
      let list = this.productionList;
      
      // 按状态筛选
      if (this.currentFilter !== 'all') {
        list = list.filter(item => item.status === this.currentFilter);
      }
      
      // 按关键词搜索
      if (this.searchKeyword) {
        list = list.filter(item => 
          item.project_name.toLowerCase().includes(this.searchKeyword.toLowerCase()) ||
          item.model.toLowerCase().includes(this.searchKeyword.toLowerCase())
        );
      }
      
      return list;
    }
  },
  methods: {
    // 获取生产项目列表
    async getProductionList() {
      try {
        // 这里调用真实的API接口
        // const result = await getProductionList();
        // this.productionList = result.data || [];
        
        // 暂时使用模拟数据
        console.log('获取生产项目列表');
      } catch (error) {
        console.error('获取生产项目列表失败:', error);
        uni.showToast({ title: '获取项目列表失败', icon: 'none' });
      }
    },
    
    onSearch() {
      // 搜索功能已通过computed实现
    },
    
    onFilterChange(filter) {
      this.currentFilter = filter;
    },
    
    // 下拉刷新
    async onRefresh() {
      this.refreshing = true;
      try {
        await this.getProductionList();
        uni.showToast({ title: '刷新成功', icon: 'success' });
      } catch (error) {
        uni.showToast({ title: '刷新失败', icon: 'none' });
      } finally {
        this.refreshing = false;
      }
    },
    
    // 查看项目详情
    viewDetail(item) {
      uni.navigateTo({
        url: `/pages/production/detail?id=${item.id}&data=${encodeURIComponent(JSON.stringify(item))}`
      });
    },
    
    // 编辑生产项目
    editProduction(item) {
      uni.navigateTo({
        url: `/pages/production/form?id=${item.id}&data=${encodeURIComponent(JSON.stringify(item))}`
      });
    },
    
    // 完成生产
    completeProduction(item) {
      uni.showModal({
        title: '确认完成',
        content: `确认完成项目"${item.project_name}"的生产吗？`,
        success: (res) => {
          if (res.confirm) {
            // 调用完成生产接口
            item.status = 'completed';
            item.status_text = '已完成';
            item.end_date = this.formatDate(new Date());
            item.completed_quantity = item.quantity;
            item.progress_percentage = 100;
            
            uni.showToast({ title: '生产已完成', icon: 'success' });
          }
        }
      });
    },
    
    // 新增生产项目
    addNewProduction() {
      uni.navigateTo({
        url: '/pages/production/form'
      });
    },
    
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    }
  }
}
</script>

<style lang="scss" scoped>
.page-content {
  min-height: 100vh;
  background: #f5f6fa;
  box-sizing: border-box;
  padding: 0 30rpx;
}

/* 筛选和搜索 */
.filter-section {
  background: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  margin: 20rpx 0;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
}

.search-box {
  margin-bottom: 15rpx;
}

.search-input {
  width: 100%;
  height: 60rpx;
  border: 1rpx solid #e0e0e0;
  border-radius: 12rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  background: #fafafa;
}

.filter-tabs {
  display: flex;
  gap: 15rpx;
}

.filter-tab {
  flex: 1;
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
  border-radius: 8rpx;
  font-size: 28rpx;
  color: #666;
  background: #f5f5f5;
  transition: all 0.3s ease;
}

.filter-tab.active {
  background: #409eff;
  color: #fff;
}

/* 生产项目列表 */
.production-list {
  height: calc(100vh - 250rpx);
}

.production-item {
  background: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 15rpx;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.production-item:active {
  transform: scale(0.98);
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15rpx;
}

.project-info {
  flex: 1;
}

.project-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 6rpx;
}

.product-model {
  font-size: 24rpx;
  color: #666;
  display: block;
}

.status-badge {
  padding: 6rpx 12rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
}

.status-badge.processing {
  background: #e6f7ff;
  color: #409eff;
}

.status-badge.completed {
  background: #f6ffed;
  color: #52c41a;
}

.status-badge.paused {
  background: #fff2e8;
  color: #fa8c16;
}

.item-content {
  margin-bottom: 15rpx;
}

.quantity-section {
  margin-bottom: 15rpx;
}

.quantity-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6rpx;
}

.quantity-label {
  font-size: 28rpx;
  color: #666;
}

.quantity-value {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.quantity-value.highlight {
  color: #409eff;
  font-weight: bold;
}

.progress-section {
  margin-bottom: 15rpx;
}

.progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6rpx;
}

.progress-text {
  font-size: 24rpx;
  color: #666;
}

.progress-percentage {
  font-size: 24rpx;
  color: #409eff;
  font-weight: 500;
}

.progress-bar {
  width: 100%;
  height: 8rpx;
  background: #f0f0f0;
  border-radius: 4rpx;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #409eff, #67c23a);
  border-radius: 4rpx;
  transition: width 0.3s ease;
}

.time-info {
  display: flex;
  flex-direction: column;
  gap: 6rpx;
}

.start-date,
.end-date {
  font-size: 24rpx;
  color: #999;
}

.item-actions {
  display: flex;
  gap: 12rpx;
}

.action-btn {
  flex: 1;
  height: 50rpx;
  border-radius: 8rpx;
  font-size: 24rpx;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.action-btn.view {
  background: #409eff;
  color: #fff;
}

.action-btn.edit {
  background: #e6a23c;
  color: #fff;
}

.action-btn.complete {
  background: #67c23a;
  color: #fff;
}

/* 空状态 */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 300rpx);
  padding: 100rpx 0;
}

.empty-img {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}

/* 添加按钮 */
.add-btn {
  position: fixed;
  right: 30rpx;
  bottom: 120rpx;
  width: 100rpx;
  height: 100rpx;
  background: #409eff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 16rpx rgba(64, 158, 255, 0.3);
  z-index: 100;
}

.add-icon {
  font-size: 48rpx;
  color: #fff;
  font-weight: bold;
}
</style> 